<template>
  <div class="material-print" ref="print">
    <h2 v-if="title == ''">物料现存量</h2>
    <h2 v-else>{{ title }}现存量</h2>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>型号规格</th>
          <th>计量单位</th>
          <th>当前库存数量</th>
          <th>锁定数量</th>
          <th>在途数量</th>
          <th>实际可用量</th>
        </tr>
      </thead>
      <tbody v-if="printData.length > 0">
        <tr v-for="(item, index) in printData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.code }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.attribute }}</td>
          <td>{{ item.unitName }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.lockQuantity }}</td>
          <td>{{ item.wayQuantity }}</td>
          <td>{{ item.availableQuantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    printData: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default() {
        return "物料单";
      },
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
@media print {
  .material-print {
    display: block !important;
  }
}

.material-print {
  display: none;
  h2 {
    text-align: center;
    color: #515a6e;
  }

  table {
    width: 100%;
    margin-bottom: 20px;
    border-left: 1px solid #ccc;

    th {
      text-align: center;
      font-size: 14px;
      padding: 5px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }

    td {
      text-align: center;
      font-size: 13px;
      color: #606266;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 5px;
    }
  }
}
</style>
